<template>
  <div class="border-line card">
    <header-title title="“配售型”保障性住房筹建计划" @fullScreen="handleFullScreen"></header-title>
    <div class="subtext" style="background-color: transparent"></div>
    <div class="subtext" style="margin-left: 1%; width: 49%">三年行动计划（总计4962套）</div>
    <div class="content" style="margin-top: -40px">
      <div class="column">
        <div class="table">
          <div class="header">
            <div class="col">所属区</div>
            <div class="col">项目名称</div>
            <div class="col">建设套数</div>
            <div class="col">启动时间</div>
          </div>
          <vue-seamless-scroll :data="listData" :class-option="classOption" class="scroll-warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="col">
                  <ellipsis :length="12">{{ item.QJ }}</ellipsis>
                </span>
                <span class="col">
                  <ellipsis :length="12">{{ item.XMMC }}</ellipsis>
                </span>
                <span class="col">{{ item.KJSTS }}</span>
                <span class="col">{{ item.QDSJ }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="column">
        <echarts-view ref="echarts" :options="option" height="300px"></echarts-view>
      </div>
    </div>
  </div>
</template>
<script>
import headerTitle from './headerTitle.vue'
import { echartsView, Ellipsis } from '@/components'
import { getGuaranteeOne, getGuaranteeTwo } from '@/api/analysis'
import { setFontSize } from '@/utils/util'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    headerTitle,
    echartsView,
    Ellipsis,
    vueSeamlessScroll,
  },
  data() {
    return {
      autoPlayer: null,
      option: {},
      classOption: {
        singleHeight: 40,
        limitMoveNum: 10,
      },
      fontSize: 16,
      listData: [],
    }
  },
  mounted() {
    this.fetchData()
    // this.initWwayOptionChart()
    // window.addEventListener('resize', this.screenAdatper)
  },
  watch: {
    areaID: function (newVal, oldVal) {
      // this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const guaranteeOne = getGuaranteeOne({ RegionNo: this.areaID })
      const guaranteeTwo = getGuaranteeTwo({ RegionNo: this.areaID })
      Promise.all([guaranteeOne, guaranteeTwo]).then((res) => {
        this.listData = res[0]
        this.initChart(res[1])
      })
    },
    initChart(res) {
      const xAxisData = []
      const data = []
      res.forEach((i) => {
        const { name, value } = i
        xAxisData.push(name)
        data.push(value)
      })
      const options = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
              { offset: 1, color: 'rgba(8, 149, 224, 1)' },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(200, 53, 38, 1)' },
              { offset: 1, color: 'rgba(242, 88, 73, 1)' },
            ],
          },
          'rgba(255, 238, 10, 1)',
        ],
        tooltip: {
          trigger: 'axis',
          formatter: '{b}&nbsp;&nbsp;&nbsp;{c}套',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'rgb(22, 245, 255,.8)',
            },
          },
        },
        grid: {
          left: 20,
          right: 20,
          top: 60,
          bottom: '3%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisTick: {
              // 刻度线
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              // 网格线
              show: false,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(127, 214, 255, 1)',
              },
            },
            axisLabel: {
              fontSize: 20,
            },
          },
        ],
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              // 刻度线
              show: false,
            },
            axisLine: {
              // 坐标轴
              show: false,
            },
            splitLine: {
              // 网格线
              show: false,
            },
            axisLabel: {
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            name: '三年行动计划',
            type: 'line',
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              color: '#fff',
              formatter: '{c}套',
            },
            data: data,
          },
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示多少个。
          },
        ],
      }
      this.option = options
      this.$nextTick(() => {
        this.setAutoPlay()
      })
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(24)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(24)
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === 7) {
          this.option.dataZoom[0].endValue = 4
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  font-size: 18px;
  .content {
    display: flex;
    flex-direction: row;
    .column {
      flex: 1;
      .table {
        .col {
          flex: 1;
          font-size: 20px;
        }

        .header {
          background: #0f3560;
          font-size: 16px;
          padding: 0 18px;
          color: #fff;
          display: flex;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
        }

        .scroll-warp {
          height: 280px;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            li {
              height: 40px;
              line-height: 40px;
              padding: 0 18px;
              color: #61a8ff;
              position: relative;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              &:nth-child(2n) {
                background: rgb(8, 38, 91);
              }
            }
          }
        }
      }
    }
  }
}
.subtext {
  color: #fff;
  background-color: #0d5b78;
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 6px 0;
  font-size: 16px;
}
</style>
